<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>uupaa-virtualtimer.js - DEMO</title>
<style type="text/css">@import url(./README.css);</style>
<style type="text/css">
.cube {
  position: absolute; top: 0; left: 0;
  width: 10px; height: 10px;
  line-height: 1;
}
</style>
<script type="text/javascript" src="http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-detect.js/uupaa-detect.mini.js"></script>
<script type="text/javascript" src="uupaa-virtualtimer.js"></script>
</head>
<body>
<p>
   | <a href="http://code.google.com/p/uupaa-js-spinoff/">Project Home(Google Code)</a>
   | <a href="./README.htm">README</a>
   | <a href="./DEMO.htm">DEMO</a>
   | <a href="./CLASS.htm">Reference</a> |<br />
   | <a href="./CHANGELOG.htm">ChangeLog</a>
   | <a href="./LICENSE.htm">License</a>
   |
</p>
<ul>
<li>Red dots:   setTimout(10ms)</li>
<li>Green dots: setInterval(10ms)</li>
<li>Blue dots:  virtual timer(10ms)</li>
<li>White dot(pace car):  setInterval(10ms)</li>
</ul>

<input type="button" value="Red" onclick="dot(100, 0, 0)" /> |
<input type="button" value="Green" onclick="dot(0, 100, 0)" /> |
<input type="button" value="Blue" onclick="dot(0, 0, 100)" /> |
<input type="button" value="Red x Green" onclick="dot(100, 100, 0)" /> |
<input type="button" value="Red x Blue" onclick="dot(100, 0, 100)" /> |
<input type="button" value="Green x Blue" onclick="dot(0, 100, 100)" /> |
<input type="button" value="Red x Green x Blue" onclick="dot(100, 100, 100)" /> |

<div id="cage"></div>

<script type="text/javascript">
Array.prototype.forEach || (Array.prototype.forEach = function(fn, me) { for(var i=0,sz=this.length;i<sz;++i){(i in this)&&fn.call(me,this[i],i,this);} });

var baseClock = 10;
var vtm = uu.vtm(baseClock);
var vp = { x: 50, y: 50, w: 600, h: 590 };
var cubes = [];
var countStart = false, vtid = 0, itid = 0, toid = 0;
var counter = [1, 1, 1];

function dot(red, green, blue) {
  var i, p = document.getElementById("cage"), e;

  // pace car
  e = createCube(p, "white",  vp.x, vp.y + 150, 10, 10, 1);
  (function(elm) {
    elm.itid = setInterval(function() {
      move(elm);
    }, baseClock);
  })(e);

  for (i = 0; i < red; ++i) {
    e = createCube(p, "red",   vp.x + i * 2, vp.y + i * 2,       10, 10, 0.3);
    (function(elm) {
      elm.toid = setTimeout(function() {
        move(elm);
        elm.toid = setTimeout(arguments.callee, baseClock);
      }, baseClock);
    })(e);
  }
  for (i = 0; i < green; ++i) {
    e = createCube(p, "green", vp.x + i * 2, vp.y + i * 2 + 50,  10, 10, 0.3);
    (function(elm) {
      elm.itid = setInterval(function() {
        move(elm);
      }, baseClock);
    })(e);
  }
  for (i = 0; i < blue; ++i) {
    e = createCube(p, "blue",  vp.x + i * 2, vp.y + i * 2 + 100, 10, 10, 0.3);
    (function(elm) {
      elm.vtid = vtm.set(function() {
        move(elm);
      }, baseClock);
    })(e);
  }
}

function createCube(parent, color, bx, by, dx, dy, opacity) {
  var e = parent.appendChild(document.createElement("div"));
  e.className += " cube ";
  e.dx = dx;
  e.dy = dy;
  e.style.backgroundColor = color;
  e.style.left = bx + "px";
  e.style.top  = by + "px";
  e.style.opacity = opacity;
  return e;
}

function move(elm) {
  var tx = parseFloat(elm.style.left) + elm.dx;
  var ty = parseFloat(elm.style.top)  + elm.dy;
  if (tx < 50 || tx + 70 > vp.w) { elm.dx = -elm.dx; } // 70 = 50px + 20px
  if (ty < 50 || ty + 70 > vp.h) { elm.dy = -elm.dy; } // 70 = 50px + 20px
  elm.style.left = tx + "px";
  elm.style.top  = ty + "px";
}
</script>
</body>
</html>
